<script lang="js">
import Type01 from './loginTypes/Type01.vue';
import Type02 from './loginTypes/Type02.vue';
import Type03 from './loginTypes/Type03.vue';
import Header from '../components/Header.vue'

</script>
<template>
    <!--<transition mode="out-in">  name="slide-fade" mode="out-in" appear appear-active-class="animated swing"
        enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft"> -->
    <Header />
    <div id="login">
        <div class="login-page">
            <div></div>
            <span>●●●⭐🌙🌏🌙⭐●●●</span>
            <transition mode="out-in" name="slide-fade" appear appear-active-class="animated swing"
                enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
                <div class="form" v-if="formLabelAlign.loginType == 1" :key="formLabelAlign.loginType">
                    <header class="htmleaf-header">
                        <h2><span>使用账号登录</span></h2>
                    </header>
                    <Type01></Type01>
                </div>
                <div class="form" v-else-if="formLabelAlign.loginType == 2" key="phone">
                    <header class="htmleaf-header">
                        <h2><span>使用手机号登录</span></h2>
                    </header>
                    <Type02></Type02>
                </div>
                <div class="form" v-else-if="formLabelAlign.loginType == 3" key="email">
                    <header class="htmleaf-header">
                        <h2><span>使用邮箱登录</span></h2>
                    </header>
                    <Type03></Type03>
                </div>
            </transition>

            <el-divider>更多登录方式</el-divider>
            <el-row>
                <!-- <el-button icon="" circle></el-button> -->
                <el-button @click="showAccountLogin" type="text" circle>
                    <svg t="1701419281586" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="21271" width="32" height="32">
                        <path
                            d="M502.28224 338.432m-234.496 0a234.496 234.496 0 1 0 468.992 0 234.496 234.496 0 1 0-468.992 0Z"
                            fill="#CAE4FF" p-id="21272"></path>
                        <path
                            d="M492.288 609.792c-160.256-0.512-289.792-130.048-289.792-289.792 0-160.768 129.024-291.84 289.792-294.4 160.256 0.512 289.792 130.048 289.792 289.792 0.512 161.28-129.024 291.84-289.792 294.4z m0-500.224c-113.664 0-205.824 92.16-205.824 205.824 0 113.664 92.16 205.824 205.824 205.824s205.824-92.16 205.824-205.824c0-113.664-92.16-205.824-205.824-205.824z"
                            fill="#0972E7" p-id="21273"></path>
                        <path
                            d="M109.824 1013.248c-23.04 0-41.984-18.944-41.984-41.984v-16.896c1.024-236.544 192.512-427.52 428.544-428.544 23.04 0 41.984 18.944 41.984 41.984 0 23.04-18.944 41.984-41.984 41.984-189.952 1.024-343.552 154.624-344.576 344.576v12.8c0.512 24.064-17.92 44.032-41.984 46.08z"
                            fill="#0972E7" p-id="21274"></path>
                        <path
                            d="M874.752 1009.152c-22.016 1.536-40.448-15.36-41.984-37.376v-17.408c-1.024-189.952-154.624-343.552-344.576-344.576-23.04 0-41.984-18.944-41.984-41.984 0-23.04 18.944-41.984 41.984-41.984 236.544 1.024 427.52 192.512 428.544 428.544v12.8c1.536 22.016-15.36 40.448-37.376 41.984h-4.608z"
                            fill="#0972E7" p-id="21275"></path>
                    </svg>
                </el-button>
                <el-button @click="showPhoneLogin" type="text" circle>
                    <svg t="1701419224074" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="20240" width="32" height="32">
                        <path
                            d="M636.416 759.808V440.32c0-40.448 32.768-73.216 73.216-73.216H844.8c40.448 0 73.216 32.768 73.216 73.216v319.488c0 40.448-32.768 73.216-73.216 73.216h-135.168c-40.448 0-73.216-33.28-73.216-73.216z"
                            fill="#FFBA40" p-id="20241"></path>
                        <path
                            d="M844.8 856.576h-135.168c-53.76 0-97.28-43.52-97.28-97.28V440.32c0-53.76 43.52-97.28 97.28-97.28H844.8c53.76 0 97.28 43.52 97.28 97.28v319.488c0 53.248-43.52 96.768-97.28 96.768z m-135.168-465.92c-27.136 0-49.152 22.016-49.152 49.152v319.488c0 27.136 22.016 49.152 49.152 49.152H844.8c27.136 0 49.152-22.016 49.152-49.152V440.32c0-27.136-22.016-49.152-49.152-49.152h-135.168z"
                            fill="#333333" p-id="20242"></path>
                        <path
                            d="M297.984 971.264c-43.008 0-77.824-34.816-77.824-77.824V173.056c0-43.008 34.816-77.824 77.824-77.824h425.472c43.008 0 77.824 34.816 77.824 77.824v720.384c0 43.008-34.816 77.824-77.824 77.824H297.984z"
                            fill="#FFBA40" p-id="20243"></path>
                        <path
                            d="M723.456 118.784c29.696 0 54.272 24.064 54.272 54.272v720.384c0 29.696-24.064 54.272-54.272 54.272H297.984c-29.696 0-54.272-24.064-54.272-54.272V173.056c0-29.696 24.064-54.272 54.272-54.272h425.472m0-48.128H297.984c-56.32 0-101.888 45.568-101.888 101.888v720.384c0 56.32 45.568 101.888 101.888 101.888h425.472c56.32 0 101.888-45.568 101.888-101.888V173.056c0-56.32-45.568-102.4-101.888-102.4z"
                            fill="#333333" p-id="20244"></path>
                        <path
                            d="M340.992 799.232c-13.312 0-24.064-10.752-24.064-24.064v-563.2c0-13.312 10.752-24.064 24.064-24.064h339.456c13.312 0 24.064 10.752 24.064 24.064v563.2c0 13.312-10.752 24.064-24.064 24.064H340.992z"
                            fill="#27C18F" p-id="20245"></path>
                        <path
                            d="M680.448 211.968v563.2H340.992v-563.2h339.456m0-47.616H340.992c-26.624 0-48.128 21.504-48.128 48.128v563.2c0 26.624 21.504 48.128 48.128 48.128h339.456c26.624 0 48.128-21.504 48.128-48.128v-563.2c0-26.624-21.504-48.128-48.128-48.128z"
                            fill="#333333" p-id="20246"></path>
                        <path d="M471.04 887.808h78.848" fill="#FFBA40" p-id="20247"></path>
                        <path
                            d="M549.888 911.872H471.04c-13.312 0-24.064-10.752-24.064-24.064s10.752-24.064 24.064-24.064h78.848c13.312 0 24.064 10.752 24.064 24.064s-10.752 24.064-24.064 24.064z"
                            fill="#333333" p-id="20248"></path>
                        <path d="M600.576 290.816m-34.816 0a34.816 34.816 0 1 0 69.632 0 34.816 34.816 0 1 0-69.632 0Z"
                            fill="#333333" p-id="20249"></path>
                        <path
                            d="M280.064 486.4H207.872c-31.232 0-56.832-25.6-56.832-56.832s25.6-56.832 56.832-56.832h72.192c31.232 0 56.832 25.6 56.832 56.832S311.296 486.4 280.064 486.4z"
                            fill="#FFBA40" p-id="20250"></path>
                        <path
                            d="M280.064 510.464H207.872c-44.544 0-80.896-36.352-80.896-80.896s36.352-80.896 80.896-80.896h72.192c44.544 0 80.896 36.352 80.896 80.896s-36.352 80.896-80.896 80.896zM207.872 397.312c-17.92 0-32.768 14.848-32.768 32.768s14.848 32.768 32.768 32.768h72.192c17.92 0 32.768-14.848 32.768-32.768s-14.848-32.768-32.768-32.768H207.872z"
                            fill="#333333" p-id="20251"></path>
                        <path
                            d="M765.44 486.4h-72.192c-31.232 0-56.832-25.6-56.832-56.832s25.6-56.832 56.832-56.832h72.192c31.232 0 56.832 25.6 56.832 56.832-0.512 31.232-26.112 56.832-56.832 56.832z"
                            fill="#FFBA40" p-id="20252"></path>
                        <path
                            d="M765.44 510.464h-72.192c-44.544 0-80.896-36.352-80.896-80.896s36.352-80.896 80.896-80.896h72.192c44.544 0 80.896 36.352 80.896 80.896s-36.864 80.896-80.896 80.896z m-72.192-113.152c-17.92 0-32.768 14.848-32.768 32.768s14.848 32.768 32.768 32.768h72.192c17.92 0 32.768-14.848 32.768-32.768s-14.848-32.768-32.768-32.768h-72.192z"
                            fill="#333333" p-id="20253"></path>
                        <path
                            d="M280.064 600.064H207.872c-31.232 0-56.832-25.6-56.832-56.832S176.64 486.4 207.872 486.4h72.192c31.232 0 56.832 25.6 56.832 56.832s-25.6 56.832-56.832 56.832z"
                            fill="#FFBA40" p-id="20254"></path>
                        <path
                            d="M280.064 623.616H207.872c-44.544 0-80.896-36.352-80.896-80.896 0-44.544 36.352-80.896 80.896-80.896h72.192c44.544 0 80.896 36.352 80.896 80.896-0.512 45.056-36.352 80.896-80.896 80.896zM207.872 510.464c-17.92 0-32.768 14.848-32.768 32.768 0 17.92 14.848 32.768 32.768 32.768h72.192c17.92 0 32.768-14.848 32.768-32.768 0-17.92-14.848-32.768-32.768-32.768H207.872z"
                            fill="#333333" p-id="20255"></path>
                        <path
                            d="M280.064 713.216H207.872c-31.232 0-56.832-25.6-56.832-56.832s25.6-56.832 56.832-56.832h72.192c31.232 0 56.832 25.6 56.832 56.832s-25.6 56.832-56.832 56.832z"
                            fill="#FFBA40" p-id="20256"></path>
                        <path
                            d="M280.064 737.28H207.872c-44.544 0-80.896-36.352-80.896-80.896 0-44.544 36.352-80.896 80.896-80.896h72.192c44.544 0 80.896 36.352 80.896 80.896-0.512 44.544-36.352 80.896-80.896 80.896z m-72.192-113.664c-17.92 0-32.768 14.848-32.768 32.768 0 17.92 14.848 32.768 32.768 32.768h72.192c17.92 0 32.768-14.848 32.768-32.768 0-17.92-14.848-32.768-32.768-32.768H207.872z"
                            fill="#333333" p-id="20257"></path>
                        <path
                            d="M280.064 826.368H207.872c-31.232 0-56.832-25.6-56.832-56.832s25.6-56.832 56.832-56.832h72.192c31.232 0 56.832 25.6 56.832 56.832s-25.6 56.832-56.832 56.832z"
                            fill="#FFBA40" p-id="20258"></path>
                        <path
                            d="M280.064 850.432H207.872c-44.544 0-80.896-36.352-80.896-80.896s36.352-80.896 80.896-80.896h72.192c44.544 0 80.896 36.352 80.896 80.896s-36.352 80.896-80.896 80.896zM207.872 737.28c-17.92 0-32.768 14.848-32.768 32.768s14.848 32.768 32.768 32.768h72.192c17.92 0 32.768-14.848 32.768-32.768s-14.848-32.768-32.768-32.768H207.872z"
                            fill="#333333" p-id="20259"></path>
                    </svg>
                </el-button>
                <el-button @click="showEmailLogin" type="text" circle>
                    <svg t="1701419173264" class="icon" viewBox="0 0 1350 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="19176" width="32" height="32">
                        <path
                            d="M1350.808511 261.446809v675.404255a87.148936 87.148936 0 0 1-87.148937 87.148936H87.148936a87.148936 87.148936 0 0 1-87.148936-87.148936V261.446809l675.404255 435.74468 675.404256-435.74468zM0 196.085106V87.148936a87.148936 87.148936 0 0 1 87.148936-87.148936h1176.510638a87.148936 87.148936 0 0 1 87.148937 87.148936v108.93617L675.404255 631.829787 0 196.085106z"
                            fill="#44D7B6" p-id="19177"></path>
                    </svg>
                </el-button>
            </el-row><br />
            <el-link type="danger" :underline="false" href="javascript:;">忘记密码？</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" :underline="false" href="javascript:;">立即注册</el-link>
        </div>
    </div>
</template>

<script lang="js" setup>
// import { el } from 'element-plus';
import { reactive, ref } from 'vue'
// import Form from './Form.vue';
const formLabelAlign = reactive({
    loginType: 1
})
function showAccountLogin() {
    formLabelAlign.loginType = 1;
}
function showPhoneLogin() {
    formLabelAlign.loginType = 2;
}
function showEmailLogin() {
    formLabelAlign.loginType = 3;
}

</script>


<style scoped>
@import url(https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css);


#login {
    /* padding-top: 0px; */
    align-content: center;
    display: flex;
    align-items: center;
    height: 100%;
    /* background: linear-gradient(135deg, #cccccc, #d6d6d6, #f9f9f9, #f9f9f9, #d6d6d6, #cccccc); */
    background: linear-gradient(90deg, #a1c4fd, #c2e9fb, #c2e9fb, #a1c4fd);
    /* background: linear-gradient(90deg, #80d4f9, #a6defa, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7); */

}

.login-page {
    width: 470px;
    min-width: 360px;
    max-width: 600px;
    /* padding: 100px 0 0; */
    margin: auto;
    position: relative;
    z-index: 1;
    opacity: 0.95;
    background-color: ghostwhite;
    /* background: linear-gradient(135deg, #a1c4fd, #c2e9fb); */
    max-width: 360px;
    padding: 45px;
    text-align: center;
    border-radius: 5%;
    color: black;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form {
    height: 360px;
    position: relative;
    z-index: 1;
    /* background: #FFFFFF; */
    max-width: 360px;
    margin: auto;
    padding: 5px;
    text-align: center;
    /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); */
}

/* .el-button {
    margin: 0;
} */

.el-row {
    justify-content: center;
}


/*  */

/*
html,
body {
    height: 100%;
    background: linear-gradient(135deg, #272727, #4a4a4a, #6d6d6d, #909090, #b3b3b3, #d6d6d6, #f9f9f9) top center no-repeat;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    background: linear-gradient(135deg, #c850c0, #4158d0);
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    background: linear-gradient(135deg, #f6d365, #fda085);
    background: linear-gradient(135deg, #a8e063, #56ab2f);
    background: linear-gradient(135deg, #292a3a, #536976);
    background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
    background: linear-gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee);
    background: linear-gradient(135deg, #272727, #4a4a4a, #6d6d6d, #909090, #b3b3b3, #d6d6d6, #f9f9f9);
    background: linear-gradient(135deg, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7);
    background: linear-gradient(135deg, #ffbe0c, #ffda0c, #fff70c, #c2ff0c, #7aff0c); 
   
}
 */
/* body {
    margin: 0;
    height: 100%;
    list-style: none;
    background: url('../assets/images/baigaoshen01.png') top right no-repeat;
    background-size: auto;
} */

.htmleaf-header {
    color: #272727;
}

/* body {
    background: linear-gradient(135deg, #272727, #4a4a4a, #6d6d6d, #909090, #b3b3b3, #d6d6d6, #f9f9f9) top center no-repeat;
} */
</style>